<template>
    <div class="flex flex-col space-y-3 justify-center items-center ">
      <div class="text-center min-h-[5rem]">
        <p class="text-5xl font-medium text-primary" v-if="isTip() || courseStore?.studyType === 'english_to_chinese'">
          {{ courseStore.currentData?.english }}
        </p>
        <div class="badge badge-ghost " v-if="isTip() || courseStore?.studyType === 'english_to_chinese'">
          {{ courseStore.currentData?.mark }}
        </div>
    </div>
      <div class="text-center min-h-[5rem]">
        <template v-if="isTip() || courseStore?.studyType === 'chinese_to_english'">
        <div class="divider text-gray-500 text-sm">译文</div>
        <p
          class="text-xl  text-base-content/80  flex items-center justify-center"
        >
          {{ courseStore.currentData?.chinese }}
        </p>
      </template>
        </div>
  
  </div>
</template>

<script setup lang="ts">
import { useTip } from "~/composables/study/studentStatus";
import { useCourseStore } from "~/stores/course";
const { isTip } = useTip();
const courseStore = useCourseStore();
</script>
